import React,{Component,PureComponent, forwardRef} from "react";
import {
  View,
  Text,
  SectionList,
  StyleSheet,
  TouchableWithoutFeedback,
  Image,
  UIManager,
  findNodeHandle,
  ScrollView, TextInput, Platform, ActivityIndicator,
} from "react-native";
import Swiper from 'react-native-swiper';
import * as RootNavigation from '../../../App';
import  LinearGradient from 'react-native-linear-gradient';
import NetUtil from '../../net/net_util'
import MenuDownView from "../job/MenuDownView";
import CustomerHeader from "../../widget/customerHeader";
import { width } from "../../util/apdater_util";
import img_arr from "../../util/img_arr";

const JobTabBar=forwardRef((props,ref)=>{
  return (
    <View style={styles.tabBar} ref={ref}>
      <TouchableWithoutFeedback onPress={()=>{props.callback(1)}} key={'menu1'}>
        <View style={styles.tab}>
          <Text numberOfLines={1} style={[styles.tabTitle,{color:props.index==1?'#E39354':'#111111'}]}>{props.tabNameList[0]}</Text>
          <Image style={styles.tabIcon} source={props.index==1?img_arr.icon_arrow_up:img_arr.icon_arrow_down}></Image>
        </View>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback onPress={()=>{props.callback(2)}} key={'menu2'}>
        <View style={styles.tab}>
          <Text numberOfLines={1} style={[styles.tabTitle,{color:props.index==2?'#E39354':'#111111'}]}>{props.tabNameList[1]}</Text>
          <Image style={styles.tabIcon} source={props.index==2?img_arr.icon_arrow_up:img_arr.icon_arrow_down}></Image>
        </View>
      </TouchableWithoutFeedback>
      <TouchableWithoutFeedback onPress={()=>{props.callback(3)}} key={'menu3'}>
        <View style={styles.tab}>
          <Text numberOfLines={1} style={[styles.tabTitle,{color:props.index==3?'#E39354':'#111111'}]}>{props.tabNameList[2]}</Text>
          <Image style={styles.tabIcon} source={props.index==3?img_arr.icon_arrow_up:img_arr.icon_arrow_down}></Image>
        </View>
      </TouchableWithoutFeedback>
    </View>
  )
})

class Work_page extends Component{
  constructor(props) {
    super(props);
    this.jobTabBar=null;
    this.popJobTabBar=null;
    this.page={
      pageSize:10,
      pageNum:1,
      totalPage:1
    };
    this.menuDownView=null
    this.state={
      type:1,//1：tab ，2，全部
      input1Focus:false,
      input2Focus:false,
      refreshing:false,
      isMoreLoading:true,
      loading:false,
      filterForm:{
        sort:0,
        filterIndex:0,
        tabNameList:['综合排序','全部分类','筛选'],
        startPrice:'',
        endPrice:'',
        industryCateId:'',
        skillCateId:'',
        status:'',
        label:''
      },
      workList:[],
      bannerList:[],
      sections:[
        { key: "知识", data: [] }
      ],
      compositeList:[{
        label:'综合排序',
        value:0
      },{
        label:'最近发布',
        value:1
      },{
        label:'赏金最多',
        value:2
      },{
        label:'投稿数从高到低',
        value:3
      },{
        label:'投稿数从低到高',
        value:4
      },{
        label:'截稿时间从近到远',
        value:5
      },{
        label:'截稿时间从远到近',
        value:6
      }],
      industryList:[],
      skillList:[],
      statusList:[{
        label:'征稿中',
        value:1
      },{
        label:'选稿中',
        value:2
      },{
        label:'公示中',
        value:3
      },{
        label:'已结束',
        value:4
      }]
    }
  }

  componentDidMount() {
    let type=(this.props.route.params&&this.props.route.params.type)?this.props.route.params.type:1
    if(type){
      this.setState({type:type})
    }
    this.getBannerData()
    this.getJobCategoryList(1)
    this.getJobCategoryList(2)
    this.getWorkList()
  }

  /*获取banner*/
  getBannerData(){
    NetUtil.get('base/home/banner',{position:3},(res)=>{
      if(res.code==200){
        this.setState({bannerList:res.data})
      }
    })
  }

  /*获取需求分类*/
  getJobCategoryList(type){
    NetUtil.get('work/job/cate',{type:type},(res)=>{
      if(res.code==200){
        if(type==1)this.setState({industryList:res.data})
        else this.setState({skillList:res.data})
      }
    })
  }

  /*获取工作列表*/
  getWorkList(){
    let filterForm=this.state.filterForm;
    let params={
      'endPoints':filterForm.endPrice,
      'industryCateId':filterForm.industryCateId,
      'label':filterForm.label,
      'skillCateId':filterForm.skillCateId,
      'sort':filterForm.sort,
      'startPoints':filterForm.startPrice,
      'status':filterForm.status,
      'pageSize':this.page.pageSize,
      'pageNum':this.page.pageNum
    }
    console.log(params)
    this.state.loading=true
    NetUtil.get('work/job/page',params,(res)=>{
      console.log(res)
      this.state.loading=false
      if(res.code=200){
        let dataList=this.state.sections[0].data
        if(this.page.pageNum==1){
          dataList=[]
        }
        this.setState({
          sections:[{key:'A',data:dataList.concat(...res.data.data)}],
          isMoreLoading:res.data.data.length<10?false:true
        })
      }
      setTimeout(()=>{
        this.setState({refreshing:false})
      },500)
    })
  }

  /*点击广告*/
  banner_Click(index){
    let banner=this.state.bannerList[index]
    if(banner.type==1){
      //普通商品
    }
    else{
      RootNavigation.navigate('WebViewVC',banner)
    }
  }

  _onRefresh(){
    this.setState({refreshing:true})
    this.page.pageNum=1
    this.getBannerData()
    this.getWorkList()
  }

  _endReached(){
    if(!this.state.isMoreLoading||this.state.loading)return;
    this.page.pageNum++;
    this.getWorkList();
  }


  /*下拉菜单*/
  menuDownChange(index){
    let filterForm=this.state.filterForm
    this.setState({input1Focus:false,input2Focus:false})
    if(index==filterForm.filterIndex) {
      filterForm.filterIndex=0
      this.setState({filterForm:filterForm})
      this.menuDownView.hideMenu()
      return
    }
    else{
      filterForm.filterIndex=index
      this.setState({filterForm:filterForm})
    }
    let tabBar=filterForm.filterIndex!=0?this.jobTabBar:this.popJobTabBar
    UIManager.measure(findNodeHandle(tabBar),(x,y,width, height, pageX, pageY)=>{
      this.menuDownView.showMenu({
        offY: y,popHeight:index==3?400:380,
        content:this.popViewByIndex(filterForm.filterIndex),
        callback:()=>{
          let filterForm=this.state.filterForm
          filterForm.filterIndex=0
          this.setState({filterForm:filterForm})
        }
      })
    })
  }

  popViewByIndex(index){
    if(index==1){
      return this._renderFilterComposite()
    }
    else if(index==2){
      return this._renderAllCatagory()
    }
    else if(index==3){
     return  this._renderFilter()
    }
    else{
      return <View></View>
    }
  }

  /*筛选发生变化*/
  filterChange(obj,name){
    let filterForm=this.state.filterForm
    if(filterForm.filterIndex==1){
      filterForm.sort=obj.value
      filterForm.tabNameList[filterForm.filterIndex-1]=obj.label
      filterForm.filterIndex=0
      this.setState({filterForm:filterForm},()=>{
        this.page.pageNum=1
        this.getWorkList()
      })
      this.menuDownView.hideMenu()
    }
    else if(filterForm.filterIndex==2){
      if(name=='industry'){
        filterForm.industryCateId=obj.id
        filterForm.skillCateId=''
      }
      else{
        filterForm.industryCateId=''
        filterForm.skillCateId=obj.id
      }
      filterForm.tabNameList[filterForm.filterIndex-1]=obj.name
      filterForm.filterIndex=0
      this.setState({filterForm:filterForm},()=>{
        this.page.pageNum=1
        this.getWorkList()
      })
      this.menuDownView.hideMenu()
    }
    else if(filterForm.filterIndex==3){
      if(name=='status'){
        filterForm.status=obj.value
        this.setState({filterForm:{...filterForm}},()=>{
          this.menuDownView.reload({content:this._renderFilter()})
        })
      }
      else if(name=='label'){
        filterForm.label=obj.label
        this.setState({filterForm:{...filterForm}},()=>{
          this.menuDownView.reload({content:this._renderFilter()})
        })
      }
    }
  }

  /*重置*/
  reset(){
    let filterForm=this.state.filterForm
    filterForm.status=''
    filterForm.label=''
    filterForm.startPrice=''
    filterForm.endPrice=''
    this.setState({filterForm:filterForm},()=>{
      this.menuDownView.reload({content:this._renderFilter()})
    })
  }

  /*返回上一个页面*/
  back(){
    this.props.navigation.pop()
  }

  confirm(){
    this.menuDownView.hideMenu()
    this.page.pageNum=1;
    this.getWorkList()
  }

  /*综合排序*/
  _renderFilterComposite(){
    return <View style={{flex:1, backgroundColor:'#FCFCFC'}}>
      <JobTabBar ref={(ref)=>this.popJobTabBar=ref} tabNameList={this.state.filterForm.tabNameList} index={this.state.filterForm.filterIndex} callback={(type)=>{this.menuDownChange(type)}}></JobTabBar>
      <ScrollView style={{paddingVertical:12}}>
        {this.state.compositeList.map((item,index)=>{
          return (
            <TouchableWithoutFeedback onPress={()=>{this.filterChange(item,'sort')}} key={'filter'+index}>
              <View style={styles.filterCell}>
                {this.state.filterForm.sort==item.value?<Image style={{width:14,height:12,marginRight:6}} source={require('../../img/duigou.png')}></Image>:null}
                <Text style={[{color:'#111111',fontSize:14},this.state.filterForm.sort==item.value?{fontWeight:'500'}:null]}>{item.label}</Text>
              </View>
            </TouchableWithoutFeedback>
          )
        })}
      </ScrollView>
    </View>
  }

  /*全部分类*/
  _renderAllCatagory(){
    return <View style={{flex:1, backgroundColor:'#FCFCFC'}}>
      <JobTabBar ref={(ref)=>this.popJobTabBar=ref} tabNameList={this.state.filterForm.tabNameList} index={this.state.filterForm.filterIndex} callback={(type)=>{this.menuDownChange(type)}}></JobTabBar>
      <ScrollView style={{paddingVertical:20,paddingHorizontal:15}}>
        <View>
          <Text style={{color:'#777777',fontSize:13}}>行业分类</Text>
          <View style={[styles.categoryList,{marginTop:3}]}>
            {this.state.industryList.map((item,index)=>{
              return <TouchableWithoutFeedback onPress={()=>{this.filterChange(item,'industry')}} key={'industry'+index}>
                <View style={[styles.categoryItem,{marginRight:index%3==2?0:10},this.state.filterForm.industryCateId==item.id?styles.itemActive:{}]}>
                  <Text style={[styles.categoryItemTitle,{color:this.state.filterForm.industryCateId==item.id?'#E39354':'#111111'}]}>{item.name}</Text>
                </View>
              </TouchableWithoutFeedback>
            })}
          </View>
        </View>
        <View style={{marginTop:25}}>
          <Text style={{color:'#777777',fontSize:13}}>技能分类</Text>
          <View style={[styles.categoryList,{marginTop:3}]}>
            {this.state.skillList.map((item,index)=>{
              return <TouchableWithoutFeedback onPress={()=>{this.filterChange(item,'skill')}} key={'skill'+index}>
                <View style={[styles.categoryItem,{marginRight:index%3==2?0:10},this.state.filterForm.skillCateId==item.id?styles.itemActive:{}]}>
                  <Text style={[styles.categoryItemTitle,{color:this.state.filterForm.skillCateId==item.id?'#E39354':'#111111'}]}>{item.name}</Text>
                </View>
              </TouchableWithoutFeedback>
            })}
          </View>
        </View>
      </ScrollView>
    </View>
  }

  /*筛选*/
  _renderFilter(){
    return (
      <View style={{flex:1, backgroundColor:'#FCFCFC'}}>
        <JobTabBar ref={(ref)=>this.popJobTabBar=ref} tabNameList={this.state.filterForm.tabNameList} index={this.state.filterForm.filterIndex} callback={(type)=>{this.menuDownChange(type)}}></JobTabBar>
        <ScrollView style={{paddingVertical:20,paddingHorizontal:15}} keyboardShouldPersistTaps='handled'>
          <View>
            <Text style={{color:'#777777',fontSize:13}}>需求状态</Text>
            <View style={[styles.categoryList,{marginTop:3}]}>
              {this.state.statusList.map((item,index)=>{
                return <TouchableWithoutFeedback onPress={()=>{this.filterChange(item,'status')}} key={'status'+index}>
                  <View style={[styles.categoryItem,{marginRight:index%3==2?0:10},this.state.filterForm.status==item.value?styles.itemActive:{}]}>
                    <Text style={[styles.categoryItemTitle,{color:this.state.filterForm.status==item.value?'#E39354':'#111111'}]}>{item.label}</Text>
                  </View>
                </TouchableWithoutFeedback>
              })}
            </View>
          </View>
          <View style={{marginTop:25}}>
            <Text style={{color:'#777777',fontSize:13}}>赏金区间</Text>
            <View style={styles.inputBox}>
              <View style={styles.inputItem}>
                <TextInput style={{flex:1}}
                           key={'input1'}
                           autoFocus={this.state.input1Focus}
                           underlineColorAndroid='transparent'
                           defaultValue={this.state.filterForm.startPrice}
                           onChangeText={(text)=>this.textChange(text,1)}
                           keyboardType={'numeric'} placeholder={'¥'}></TextInput>
              </View>
              <View style={[styles.inputItem,{marginLeft:30}]}>
                <TextInput style={{flex:1}}
                           key={'input2'}
                           autoFocus={this.state.input2Focus}
                           underlineColorAndroid='transparent'
                           defaultValue={this.state.filterForm.endPrice}
                           onChangeText={(text)=>this.textChange(text,2)}
                           placeholder={'¥'}
                           keyboardType={'numeric'}></TextInput>
              </View>
            </View>
          </View>
          <View style={{marginTop:25}}>
            <Text style={{color:'#777777',fontSize:13}}>需求等级</Text>
            <View style={[styles.categoryList,{marginTop:3}]}>
              <TouchableWithoutFeedback onPress={()=>{this.filterChange({label:'种子项目'},'label')}}>
                <View style={[styles.categoryItem,this.state.filterForm.label=='种子项目'?styles.itemActive:{}]}><Text style={[styles.categoryItemTitle,{color:this.state.filterForm.label=='种子项目'?'#E39354':'#111111'}]}>种子项目</Text></View>
              </TouchableWithoutFeedback>
            </View>
          </View>
          <View style={styles.filterBtns}>
            <TouchableWithoutFeedback onPress={()=>{this.reset()}}>
              <View style={styles.reset}><Text style={styles.resetTitle}>重置</Text></View>
            </TouchableWithoutFeedback>
            <TouchableWithoutFeedback onPress={()=>{this.confirm()}}>
              <View style={styles.confirm}><Text style={styles.confirmTitle}>确定</Text></View>
            </TouchableWithoutFeedback>
          </View>
        </ScrollView>
      </View>
    )
  }

  _renderHeader=()=>{
    const bannerEle=[]
    this.state.bannerList.forEach((item,index)=>{
      bannerEle.push(
        <TouchableWithoutFeedback onPress={()=>{this.banner_Click(index)}} style={{flex:1,borderRadius:10,overflow:"hidden"}} key={index}>
          <Image style={{flex:1,borderRadius:10,overflow:'hidden'}} source={{uri:item.image}} keyExtractor={url=>item.id}></Image>
        </TouchableWithoutFeedback>
      )
    })
    return (
      <View style={{backgroundColor:'#fff'}}>
        {this.state.type==2?(
          <CustomerHeader title={'创新兼职'} leftOnPress={()=>{this.back()}}></CustomerHeader>
        ):(
          <View style={{height:176,backgroundColor:'#fff'}}>
            <View>
              <Image style={styles.statusBar} source={require('../../img/header_bg.png')}></Image>
            </View>
            <View style={styles.banner}>
              <Swiper style={styles.wrapper} showsButtons={false} autoplay={true} dot={<View style={{ backgroundColor: 'gray', width: 5, height: 5, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
                      activeDot={<View style={{ backgroundColor: 'white', width: 5, height: 5, borderRadius: 2.5, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3 }} />}
                      paginationStyle={{
                        bottom: 5,
                        left:'100%',
                        transform:[{translateX:-30}]
                      }}
              >{bannerEle}</Swiper>
            </View>
          </View>
        )}
        <JobTabBar ref={(ref)=>this.jobTabBar=ref} tabNameList={this.state.filterForm.tabNameList} index={this.state.filterForm.filterIndex} callback={(type)=>{this.menuDownChange(type)}}></JobTabBar>
      </View>
    )
  }

  renderFooter(){
    if(this.state.isMoreLoading){
      return(
        <View style={{marginVertical: 10}}>
          <ActivityIndicator color="#f8da85"/>
        </View>
      )
    }else{
      return(
        <View style={{marginVertical: 10,justifyContent:'center',alignItems:'center'}}>
          <Text style={{color:'#999999'}}>没有更多了。</Text>
        </View>
      )
    }
  }

  _renderItem=(info)=>{
    let item=info.item
    let statusObj=this.state.statusList.find((status)=>{
      return status.value==item.status
    })
    return (
      <TouchableWithoutFeedback onPress={()=>{this.jobDetail(item.id)}}>
        <View style={styles.cell}>
          <Image style={styles.logo} source={{uri:item.avatar}}></Image>
          <View style={styles.workInfo}>
            <View style={styles.titleBox}>
              <View style={[styles.flexBox]}>
                {item.hot==1?<Image style={styles.hot} source={require('../../img/hot_work_icon.png')}></Image>:null}
                <Text style={styles.title}>{item.title}</Text>
              </View>
              <Text style={styles.score}>{item.points}积分</Text>
            </View>
            <View style={styles.tags}>
              <Text style={styles.tag}>{item.skillName}</Text>
              <Text style={styles.tag}>{item.industryName}</Text>
            </View>
            <View style={[styles.flexBox,{justifyContent:'space-between',marginTop:12}]}>
              <Text style={{color:'#A5A5A5',fontSize:11}}>截稿时间：{item.deadlineTime} · <Text style={{color:'#FC3D3D',fontSize:11}}>{statusObj?statusObj.label:''}</Text></Text>
              <Text style={{color:'#A5A5A5',fontSize:11}}>参与人数：{item.joinNum}</Text>
            </View>
            <Text style={styles.des}>{item.content}</Text>
            <View style={styles.menu}>
              <View style={styles.menuItem}><Image style={styles.menuIcon} source={require('../../img/work_share_icon.png')}></Image><Text>{item.shareNum}</Text></View>
              <View style={[styles.menuItem,{justifyContent:'center'}]}><Image style={styles.menuIcon} source={require('../../img/work_favor_icon.png')}></Image><Text>{item.likeNum}</Text></View>
              <View style={[styles.menuItem,{justifyContent:'flex-end'}]}><Image style={styles.menuIcon} source={require('../../img/work_message_icon.png')}></Image><Text>{item.commentNum}</Text></View>
            </View>
          </View>
        </View>
      </TouchableWithoutFeedback>
    )
  }

  jobDetail(id){
    RootNavigation.navigate('jobDetail',{jobId:id})
  }

  publishWork(){
    RootNavigation.navigate('PublishWork',{callback:(()=>{
        console.log(122312312321)
        this.page.pageNum=1
        this.getWorkList()
    })})
  }

  /*限制只能输入两位小数*/
  textChange(text,type){
    let newText = (text != '' && text.substr(0,1) == '.') ? '' : text;
    newText = newText.replace(/^0+[0-9]+/g, "0"); //不能以0开头输入
    newText = newText.replace(/[^\d.]/g,""); //清除"数字"和"."以外的字符
    newText = newText.replace(/\.{2,}/g,"."); //只保留第一个, 清除多余的
    newText  = newText.replace(".","$#$").replace(/\./g,"").replace("$#$",".");
    newText = newText.replace(/^(\-)*(\d+)\.(\d\d).*$/,'$1$2.$3'); //只能输入
    let filterForm=this.state.filterForm
    if(type==1)filterForm.startPrice=newText
    else filterForm.endPrice=newText
    this.state.filterForm=filterForm
    this.setState({filterForm:filterForm,input1Focus:type==1?true:false,input2Focus:type==2?true:false},()=>{
      this.menuDownView.reload({content:this._renderFilter()})

    })
  }


  render(){
    return (
      <View style={{flex:1,backgroundColor:'#F6F6F6'}}>
        {this.state.type==2?this._renderHeader():null}
        <SectionList renderSectionHeader={this.state.type==1?this._renderHeader:(()=>{return null})}
                     renderItem={this._renderItem}
                     showsVerticalScrollIndicator={false}
                     ItemSeparatorComponent={()=>{
                       return <View style={{backgroundColor:'#F6F6F6',height:5}}></View>
                     }}
                     ListFooterComponent={()=>this.renderFooter()}
                     onEndReachedThreshold = {0.2} //当距离内容比例不足内容0.1比例时触发onEndReached
                     onRefresh = {this._onRefresh.bind(this)}
                     onEndReached = {this._endReached.bind(this)} //上拉加载数据
                     refreshing = {this.state.refreshing}
                     keyExtractor={(item)=>item.id}
                     sections={this.state.sections}></SectionList>
        <MenuDownView ref={(ref)=>this.menuDownView=ref}></MenuDownView>
        <TouchableWithoutFeedback onPress={this.publishWork.bind(this)}>
          <LinearGradient colors={['#f8da85','#e79c58']} start={{x:0,y:1}} style={styles.publishBox}>
            <Text style={{color:'#fff',fontSize:14}}>发布</Text>
            <Text style={{color:'#fff',fontSize:14}}>需求</Text>
          </LinearGradient>
        </TouchableWithoutFeedback>
      </View>
    )
  }
}
export default module=Work_page

const styles=StyleSheet.create({
  statusBar:{
    height: 55
  },
  banner:{
    position:'absolute',
    top:44,
    left:14,
    right:14,
    height:130,
    borderRadius:5,
    backgroundColor:'#fff',
  },
  wrapper:{
    borderRadius: 10,
    overflow:'hidden'
  },
  tabBar:{
    height:40,
    backgroundColor: '#fff',
    borderBottomWidth:1,
    borderBottomStyle:'solid',
    borderBottomColor:'#F6F6F6',
    flexDirection:'row',
    justifyContent:'space-around',
    alignItems:'center'
  },
  tab:{
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    flex:1,
    height:40,
    paddingHorizontal:15
  },
  tabTitle:{
    color:'#111111',
    fontSize:13
  },
  tabIcon:{
    width:6,
    height:4,
    marginLeft:6
  },
  cell:{
    flexDirection:'row',
    justifyContent:'flex-start',
    paddingHorizontal:14,
    paddingTop:22,
    backgroundColor:'#fff'
  },
  logo:{
    width: 49,
    height:49,
    borderRadius:7
  },
  workInfo:{
    marginLeft: 12,
    flex:1
  },
  titleBox:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center'
  },
  flexBox:{
    flexDirection:'row',
    justifyContent:'flex-start',
  },
  hot:{
    width:16,
    height:16,
    marginRight:5
  },
  title:{
    color:'#0F0F0F',
    fontSize: 15,
    fontWeight:'500'
  },
  score:{
    color:'#E39354',
    fontSize:15,
    fontWeight: '500'
  },
  tags:{
    flexDirection:'row',
    marginTop: 8,
    justifyContent:'flex-start',
    flexWrap:'wrap',
    width:'100%',
  },
  tag:{
    backgroundColor:'#F6F6F6',
    color:'#3F3F3F',
    fontSize:11,
    height:19,
    lineHeight: 19,
    textAlign: 'center',
    paddingHorizontal:5,
    borderRadius:3,
    marginRight:4,
    marginBottom:5
  },
  des:{
    color:'#3F3F3F',
    fontSize:11,
    marginTop: 17
  },
  menu:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    height:50,
    borderTopWidth:1,
    borderTopStyle:'solid',
    borderTopColor:'#F6F6F6',
    marginTop:15
  },
  menuItem:{
    flex:1,
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center'
  },
  menuIcon:{
    width:18,
    height:18,
    marginRight:8
  },
  publishBox:{
    position: 'absolute',
    width:60,
    height:60,
    bottom:40,
    right: 12,
    borderRadius:30,
    flexDirection:'column',
    justifyContent:'center',
    alignItems:'center'
  },
  /*综合排序*/
  filterCell:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    height:45,
    paddingLeft:15
  },
  /*分类*/
  categoryList:{
    flexDirection:'row',
    justifyContent:'flex-start',
    flexWrap: 'wrap'
  },
  categoryItem:{
    width:(width-53)/3.0,
    height:30,
    borderRadius:15,
    backgroundColor:'#F3F4F6',
    marginTop:10,
    marginRight:10
  },
  categoryItemTitle:{
    flex:1,
    color:'#111111',
    fontSize:13,
    textAlign:'center',
    lineHeight:30
  },
  inputBox:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center',
    marginTop:14
  },
  inputItem:{
    flex:1,
    height:30,
    borderRadius:15,
    backgroundColor:'#F3F4F6',
    paddingHorizontal:15
  },
  itemActive:{
    backgroundColor:'rgba(227, 147, 84,0.1)'
  },
  filterBtns:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    marginTop:24,
  },
  reset:{
    flex:3,
    height:35,
    borderRadius:17.5,
    borderColor:'#E39354',
    borderStyle:'solid',
    borderWidth:1
  },
  confirm:{
    flex:4,
    height:35,
    borderRadius:17.5,
    backgroundColor:'#E39354',
    marginLeft:11
  },
  resetTitle:{
    color:'#E39354',
    fontSize:13,
    flex:1,
    textAlign:'center',
    lineHeight:35,
    fontWeight:'500'
  },
  confirmTitle:{
    color:'#FFFFFF',
    fontSize:13,
    flex:1,
    textAlign:'center',
    lineHeight:35,
    fontWeight:'500'
  }
})
